<template>
  <div class="my-tab-bar">
    <div class="tab-item" 
    v-for="(obj,index) in tabs" :key="index"
    :class="{current: activeIndex === index}"
    @click="btn(index)"
     >
      <!-- 图标 -->
      <span class="iconfont " :class="obj.iconText" ></span>
      <!-- 文字 -->
      <span>{{obj.text}}</span>
    </div>
  </div>
</template>

<script>
export default {

  data (){
    return{
      activeIndex: 0 
    }
  },
  methods:{
      btn(index) {
        this.activeIndex = index;
        this.$emit("changBar",index)
        
      }
  },
  props:{
    tabs :{
      type: Array,
      required:true,
      validator(val){ //自定义规则
      //val外面给tabs变量传值
      // console.log(val);
        if(val.length >=2 &&val.length <= 5){
          return true;
          
        }else {
          console.error("tabs长度必须为2-5个对象")
          return false;
        }
      }

    }
  }
  }
  // ....其他代码

</script>
<style lang="less" scoped>
.my-tab-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  border-top: 1px solid #ccc;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: white;
  .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .current {
  color: #1d7bff;
}
}
</style>